<template>
  <div class="right flexC flex1">
    <div class="right_top flex1">
      <div class="manwomen_bg flex JustifyContentSA AlignItemsC">
        <div class="flex AlignItemsC" style="margin-top: 2rem;  padding-left: 2rem;">
          <div class="women"></div>
          <div class=" flexC flex1" style="padding-left: 1rem;">
            <p class="colorF font_s20">女医生</p>
            <p class="font_s24 font_w4 quarter">{{ man }}%</p>
          </div>
        </div>
        <div class="xuxian"></div>
        <div class="flex AlignItemsC" style="margin-top: 2rem; padding-right:2rem;">
          <div class="man"></div>
          <div class=" flexC flex1" style="padding-left: 1rem;">
            <p class="colorF font_s20">男医生</p>
            <p class="font_s24 font_w4 quarter1">{{ woman }}%</p>
          </div>
        </div>
      </div>
    </div>
    <h2 class="textC colorF " style="position: relative; top: 5.5%; color: rgb(255,255,255,0.8);">各地区工单TOP榜</h2>
    <div class="right_bottom flex3 colorF "><div id="chart2"></div></div>
  </div>
</template>

<script>
export default {
  name: 'AreaRight',
  props: ['query', 'cityCode'],
  data () {
    return {
      // 男女
      woman: '',
      man: '',
      // top榜
      orderValueList: [],
      areaList: [],
      orderNum: []
    }
  },
  mounted () {
    let cityCodesLocal = localStorage.getItem('cityCode')
    if (this.cityCode == null || this.cityCode === undefined) {
      console.log('right缓存cityCodesLocal：', cityCodesLocal)
      this.handle(cityCodesLocal)
    } else {
      console.log('right不是缓存cityCode：', this.cityCode)
      this.handle(this.cityCode)
    }
  },
  methods: {
    childFun (code) {
      this.orderNum = []
      this.areaList = []
      this.orderValueList = []
      this.handle(code)
    },
    handle (code) {
      // 男女
      this.$http.post(this.$api.Manwoman.manwoman, 'qxcode=' + code, true).then(result => {
        if (result === null || result === undefined) {
          return
        }
        let arr = result.data.response.doctorSexProportion
        this.woman = arr.Woman
        this.man = arr.Man
        console.log('男:', this.man)
        console.log('女:', this.woman)
      })
      // top榜
      this.$http.post(this.$api.Hqgdwcsl.hqgdwcsl, 'qxcode=' + code, true).then(result => {
        if (result === null || result === undefined) {
          return
        }
        console.log('右边：', result.data.response.countTotalRegionOrder)
        console.log('接口rightcode:', code)
        let arr = result.data.response.countTotalRegionOrder
        arr.forEach((val, i) => {
          this.orderNum.push(i + 1)
          this.areaList.push(val.region)
          this.orderValueList.push(val.num)
        })
        this.orderSumFun(this.orderNum.reverse(), this.areaList.reverse(), this.orderValueList.reverse())
      })
    },

    orderSumFun (order, arrX, arrY) {
      let myChart2 = this.$echarts.init(document.getElementById('chart2'))
      let option = {
        grid: {
          top: '12%',
          left: '20%',
          right: '30%',

          containLabel: true
        },
        xAxis: [
          {
            type: 'value',
            axisLine: {
              // y轴
              show: false
            },
            axisTick: {
              // y轴刻度线
              show: false
            },
            axisLabel: {
              show: false,
              textStyle: {
                color: '#B8C3CC',
                fontSize: 16
              }
            },
            splitLine: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: 'category',
            show: true,
            position: 'left',
            offset: 100,
            axisLine: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: 16
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            data: order
          },
          {
            type: 'category',
            show: true,
            position: 'left',
            offset: 0,
            axisLine: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: 16
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            data: arrX
          }
        ],
        series: [
          {
            name: '',
            type: 'bar',
            barWidth: '5',
            itemStyle: {
              normal: {
                color: '#0666E8',
                label: {
                  show: true,
                  position: 'right',
                  textStyle: {
                    color: '#fff',
                    fontSize: 16
                  }
                }
              }
            },
            data: arrY
          }
        ]
      }
      myChart2.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.right {
  width: 100%;
  height: 100%;

  #chart2 {
    width: 100%;
    height: 100%;
  }
  .right_top {
    background: url(../../../assets/img/home/datasea/right1.png) no-repeat;
    background-size: 100% 93%;
    .manwomen_bg {
      height: 13.5rem;
      width: 30rem;
    }
    .women {
      width: 3.3rem;
      height: 4.3rem;
      background: url(../../../assets/img/home/datasea/women.png) no-repeat;
      background-size: 100% 100%;
    }
    .quarter {
      color: #fb9ed8;
    }
    .xuxian {
      margin-top: 2rem;
      width: 0.0625rem;
      height: 6rem;
      background: url(../../../assets/img/home/datasea/3.png);
      background-size: 100% 100%;
    }
    .man {
      width: 3.3rem;
      height: 4.3rem;
      background: url(../../../assets/img/home/datasea/man.png) no-repeat;
      background-size: 100% 100%;
    }
    .quarter1 {
      color: #33ebfe;
    }
  }
  .right_bottom {
    background: url(../../../assets/img/home/datasea/right2.png) no-repeat;
    background-size: 100% 100%;
  }
}
</style>
